<!--
 * @Author: daidai
 * @Date: 2022-03-01 09:43:37
 * @LastEditors: Seven
 * @LastEditTime: 2022-11-22 13:42:31
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-bottom.vue
-->
<template>
  <div
    v-if="pageflag"
    class="left_boottom_wrap beautify-scroll-def"
    :class="{ 'overflow-y-auto': !sbtxSwiperFlag }"
  >
    <component :is="components" :data="list" :class-option="defaultOption">
      <ul class="left_boottom">
        <li class="left_boottom_item" v-for="(item, i) in list" :key="i">
          <span class="orderNum doudong">{{ i + 1 }}</span>
          <div class="inner_right">
            <div class="dibu"></div>
            <span class="contents ciyao" style="font-size: 12px">
              {{ item }}</span
            >
          </div>
        </li>
      </ul>
    </component>
  </div>
  <Reacquire v-else @onclick="getData" style="line-height: 200px" />
</template>

<script>
// import { currentGET } from "api";
import vueSeamlessScroll from "vue-seamless-scroll"; // vue2引入方式
import Kong from "../../components/kong.vue";
export default {
  components: { vueSeamlessScroll, Kong },
  data() {
    return {
      list: [
        "勤洗手。使用肥皂或洗手液并用流动水洗手，用一次性纸巾擦手。",
        "保持良好的呼吸道卫生习惯。咳嗽或打喷嚏时，用纸巾等遮住口鼻。",
        "增强体质和免疫力。均衡饮食、适量运动、作息规律，避免过度疲劳。",
        "保持环境清洁和通风。每天开窗通风数次不少于3次，每次20-30分钟。",
        "尽量减少到人群密集场所活动，避免接触呼吸道感染患者。",
        "如出现呼吸道感染症状如咳嗽、流涕、发热等，应居家隔离休息。",
        "避免去疾病正在流行的地区。",
        "减少到人员密集的公共场所活动。",
        "不要接触、购买和食用野生动物（即野味）。",
        "居室保持清洁，勤开窗，经常通风。",
        "减少接触公共场所的公共物品和部位。",
        "外出佩戴医用外科口罩或N95口罩。",
        "不与他人混用或共用口罩。",
        "捏紧鼻夹，使口罩与脸颊贴合，避免漏气。",
        "不建议清洗或使用消毒剂、加热等方法进行消毒后使用。",
        "区分口罩正反面，不能两面戴。",
        "有咳嗽或打喷嚏等症状者，配戴一次性使用医用口罩或医用外科口罩。",
        "在车站、机场等要主动配合监测体温、查验健康码，减少滞留时间。",
        "尽量使用扫码支付等非接触支付方式付费。",
        "乘坐公共交通工具结束后，正确洗手，确保手部卫生。",
      ],
      pageflag: true,
      components: vueSeamlessScroll,
      defaultOption: {
        ...this.$store.state.setting.defaultOption,
        singleHeight: 240,
        limitMoveNum: 5,
        step: 0,
      },
    };
  },
  computed: {
    sbtxSwiperFlag() {
      let sbtxSwiper = this.$store.state.setting.sbtxSwiper;
      if (sbtxSwiper) {
        this.components = vueSeamlessScroll;
      } else {
        this.components = Kong;
      }
      return sbtxSwiper;
    },
  },
  created() {},

  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.pageflag = true;
      let timer = setTimeout(() => {
        clearTimeout(timer);
        this.defaultOption.step = this.$store.state.setting.defaultOption.step;
      }, this.$store.state.setting.defaultOption.waitTime);
    },
  },
};
</script>
<style lang='scss' scoped>
.left_boottom_wrap {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.doudong {
  //  vertical-align:middle;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}

.overflow-y-auto {
  overflow-y: auto;
}

.left_boottom {
  width: 100%;
  height: 100%;

  .left_boottom_item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    font-size: 14px;
    margin: 10px 0;
    .orderNum {
      margin: 0 16px 0 -20px;
    }

    .info {
      margin-right: 10px;
      display: flex;
      align-items: center;
      color: #fff;

      .labels {
        flex-shrink: 0;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.6);
      }

      .zhuyao {
        color: $primary-color;
        font-size: 15px;
      }

      .ciyao {
        color: rgba(255, 255, 255, 0.8);
      }

      .warning {
        color: #e6a23c;
        font-size: 15px;
      }
    }

    .inner_right {
      position: relative;
      height: 100%;
      width: 380px;
      flex-shrink: 0;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      .dibu {
        position: absolute;
        height: 2px;
        width: 104%;
        background-image: url("../../assets/img/zuo_xuxian.png");
        bottom: -10px;
        left: -2%;
        background-size: cover;
      }
      .addresswrap {
        width: 100%;
        display: flex;
        margin-top: 8px;
      }
    }

    .wangguan {
      color: #1890ff;
      font-weight: 900;
      font-size: 15px;
      width: 80px;
      flex-shrink: 0;
    }

    .time {
      font-size: 12px;
      // color: rgba(211, 210, 210,.8);
      color: #fff;
    }

    .address {
      font-size: 12px;
      cursor: pointer;
      // @include text-overflow(1);
    }

    .types {
      width: 30px;
      flex-shrink: 0;
    }

    .typeRed {
      color: #fc1a1a;
    }

    .typeGreen {
      color: #29fc29;
    }
  }
}
</style>